﻿<div class="row" ng-app="myScore">

    <div ng-controller="scoreCtrl">

        <div class="col-md-3 col-sm-3 col-xs-3">
            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">五虎上将*魏</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="wei in weis">
                            <td style="background:#5191FF">
                                {{wei.Name}}
                            </td>
                            <td style="background:#5191FF">
                                {{wei.Ratio | percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">
            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">五虎上将*蜀</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="shu in shus">
                            <td style="background:#E08B55">
                                {{shu.Name}}
                            </td>
                            <td style="background:#E08B55">
                                {{shu.Ratio | percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">
            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">五虎上将*吴</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="wu in wus">
                            <td style="background:#7EAB44">
                                {{wu.Name}}
                            </td>
                            <td style="background:#7EAB44">
                                {{wu.Ratio | percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">
            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">五虎上将*群</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="qun in quns">
                            <td style="background:#766F99">
                                {{qun.Name}}
                            </td>
                            <td style="background:#766F99">
                                {{qun.Ratio | percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">

            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">热辣登场</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>英雄</th>
                            <th>胜场</th>
                            <th>总登场</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="hero in heros">
                            <td ng-style="set_hero_color(hero)">
                                {{hero.Name}}
                            </td>
                            <td ng-style="set_hero_color(hero)">
                                {{hero.GoalTimes}}
                            </td>
                            <td ng-style="set_hero_color(hero)">
                                {{hero.Times}}
                            </td>
                            <td ng-style="set_hero_color(hero)">
                                {{(hero.GoalTimes/hero.Times) | percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(0)">1</a></li>
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(1)">2</a></li>
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(2)">3</a></li>
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(3)">4</a></li>
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(4)">5</a></li>
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(5)">6</a></li>
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(6)">7</a></li>
                        <li class="page-item"><a class="page-link" ng-click="heroshowtime(7)">8</a></li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">

            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">主将威武</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>英雄</th>
                            <th>登场数</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="hero in herochiefs">
                            <td ng-style="set_chief_color(hero)">
                                {{hero.Name}}
                            </td>
                            <td ng-style="set_chief_color(hero)">
                                {{hero.Times}}
                            </td>
                            <td ng-style="set_chief_color(hero)">
                                {{hero.Percentage| percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(0)">1</a></li>
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(1)">2</a></li>
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(2)">3</a></li>
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(3)">4</a></li>
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(4)">5</a></li>
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(5)">6</a></li>
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(6)">7</a></li>
                        <li class="page-item"><a class="page-link" ng-click="chiefshowtime(7)">8</a></li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">

            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">副将霸气</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>英雄</th>
                            <th>登场数</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="hero in herovices">
                            <td ng-style="set_vice_color(hero)">
                                {{hero.Name}}
                            </td>
                            <td ng-style="set_vice_color(hero)">
                                {{hero.Times}}
                            </td>
                            <td ng-style="set_vice_color(hero)">
                                {{hero.Percentage| percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(0)">1</a></li>
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(1)">2</a></li>
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(2)">3</a></li>
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(3)">4</a></li>
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(4)">5</a></li>
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(5)">6</a></li>
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(6)">7</a></li>
                        <li class="page-item"><a class="page-link" ng-click="viceshowtime(7)">8</a></li>
                    </ul>
                </nav>
            </div>
        </div>


        <div class="col-md-3 col-sm-3 col-xs-3">

            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">神将组合</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>英雄组合</th>
                            <th>登场</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="combine in combinations">
                            <td ng-style="set_combination_color(combine)">
                                {{combine.Fighter1}} - {{combine.Fighter2}}
                            </td>
                            <td ng-style="set_combination_color(combine)">
                                {{combine.TotalGame}}
                            </td>
                            <td ng-style="set_combination_color(combine)">
                                {{combine.WinGame/combine.TotalGame | percentage:2}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" ng-click="showcombinations(0)">1</a></li>
                        <li class="page-item"><a class="page-link" ng-click="showcombinations(1)">2</a></li>
                        <li class="page-item"><a class="page-link" ng-click="showcombinations(2)">3</a></li>
                        <li class="page-item"><a class="page-link" ng-click="showcombinations(3)">4</a></li>
                        <li class="page-item"><a class="page-link" ng-click="showcombinations(4)">5</a></li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="col-md-10 col-sm-10 col-xs-10">

            <div class="panel panel-default"></div>
            <div class="panel-heading">
                @*<h5 class="sub-header">胜利之星</h5>*@
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#season3" ng-click="displayLine(100)">
                    赛季详情
                </button>
            </div>
            <div class="modal fade" id="season3" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">赛季详情</h4>
                        </div>
                        <div class="modal-body">
                            <canvas id="season-chart-area" width="300" height="300" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>总场次</th>
                            <th>总胜场</th>
                            <th>总击杀</th>
                            <th>胜率</th>
                            <th>积分</th>
                            <th>预计胜率</th>
                            <th>主将代表</th>
                            <th>副将代表</th>
                            <th>喜好主将</th>
                            <th>喜好副将</th>
                            <th>当季胜场</th>
                            <th>当季全部</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="win in wins" ng-style="set_playerratio_color(win)">
                            <td>
                                {{win.Name}}
                            </td>
                            <td>
                                {{win.TotalTimes}}
                            </td>
                            <td>
                                {{win.WinTimes}}
                            </td>
                            <td>
                                {{win.Kills}}
                            </td>
                            <td>
                                <b>
                                    {{win.Ratio}}
                                </b>
                            </td>
                            <td>
                                {{win.Points}}
                            </td>
                            <td>
                                {{(win.WinTimes/(win.TotalTimes+win.RemainedGames)) | percentage:2}}
                                ~
                                {{(win.WinTimes+win.RemainedGames)/(win.TotalTimes+win.RemainedGames) | percentage:2}}
                            </td>
                            <td>
                                {{win.RepresentChief}}
                            </td>
                            <td>
                                {{win.RepresentVice}}
                            </td>
                            <td>
                                {{win.FavorChief}}
                            </td>
                            <td>
                                {{win.FavorVice}}
                            </td>
                            <td>
                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#win{{win.Name}}" ng-click="displayRadar(win.Name)">
                                    Details
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#all{{win.Name}}" ng-click="displayAll(win.Name)">
                                    Details
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div ng-repeat="player in players">
                    <div class="modal fade" id="win{{player.Name}}" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">胜场详图</h4>
                                </div>
                                <div class="modal-body">
                                    <canvas id="win-chart-area{{player.Name}}" width="300" height="300" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div ng-repeat="player in players">
                    <div class="modal fade" id="all{{player.Name}}" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">全部详图</h4>
                                </div>
                                <div class="modal-body">
                                    <canvas id="all-chart-area{{player.Name}}" width="300" height="300" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-10 col-sm-10 col-xs-10">

            <div class="panel panel-default"></div>
            <div class="panel-heading">

                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#season0" ng-click="displayLine(0)">
                    历史战绩
                </button>
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#seasonnation0" ng-click="displaybar(0)">
                    国家战绩
                </button>
            </div>
            <div class="modal fade" id="season0" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">历史战绩</h4>
                        </div>
                        <div class="modal-body">
                            <canvas id="season-chart-area-history" width="300" height="300" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="seasonnation0" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">国家战绩</h4>
                        </div>
                        <div class="modal-body">
                            <canvas id="nation-chart-area-history" width="300" height="300" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>总场次</th>
                            <th>总击杀</th>
                            <th>总胜场</th>
                            <th>总胜率</th>
                            <th>独赢胜场</th>
                            <th>独赢胜率</th>
                            <th>合作胜场</th>
                            <th>合作胜率</th>
                            <th>野场次</th>
                            <th>野胜场</th>
                            <th>野胜率</th>
                            <th>胜场详情</th>
                            <th>全部详情</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="history in historys">
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.Name}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.TotalGames}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.TotalKills}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.WinnerGames}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.WinnerGames/history.TotalGames | percentage:2}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.SoloWinnerGames}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.SoloWinnerGames/history.TotalGames | percentage:2}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.CooperationWinnerGames}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.CooperationWinnerGames/history.TotalGames | percentage:2}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.CareeristGames}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.CareeristWinnerGames}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                {{history.CareeristWinnerGames/history.CareeristGames | percentage:2}}
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#hiswin{{history.Name}}" ng-click="displayRadarHis(history.Name)">
                                    Details
                                </button>
                            </td>
                            <td ng-style="set_backcolor(history.RepresentNation)">
                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#hisall{{history.Name}}" ng-click="displayAllHis(history.Name)">
                                    Details
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div ng-repeat="player in players">
                    <div class="modal fade" id="hiswin{{player.Name}}" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">胜场详图</h4>
                                </div>
                                <div class="modal-body">
                                    <canvas id="his-win-chart-area{{player.Name}}" width="300" height="300" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div ng-repeat="player in players">
                    <div class="modal fade" id="hisall{{player.Name}}" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">全部详图</h4>
                                </div>
                                <div class="modal-body">
                                    <canvas id="his-all-chart-area{{player.Name}}" width="300" height="300" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5 col-sm-5 col-xs-5">

            <div class="panel panel-default"></div>
            <div class="panel-heading"><h5 class="sub-header">首亮狂人</h5></div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;" id="tbfirst">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>场次</th>
                            <th>胜率</th>
                            <th>全局比率</th>
                            <th>个人比率</th>
                            <th>详情</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="show in shows" ng-style="set_showfirst_color(show)">
                            <td>
                                {{show.Name}}
                            </td>
                            <td>
                                {{show.Times}}
                            </td>
                            <td>
                                {{(show.ShowFirstWinTimes/show.Times) | percentage:2}}
                            </td>
                            <td>
                                {{(show.Times/show.TotalGames) | percentage:2}}
                            </td>
                            <td>
                                {{(show.Times/show.ParticipateTotalGames) | percentage:2}}
                            </td>
                            <td>
                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#{{show.Name}}" ng-click="displayPie(show.Name)">
                                    Details
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div ng-repeat="player in players">
                    <div class="modal fade" id="{{player.Name}}" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">首亮详图</h4>
                                </div>
                                <div class="modal-body">
                                    <canvas id="chart-area{{player.Name}}" width="300" height="300" />
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-2 col-sm-2 col-xs-2">

            <div class="panel panel-default"></div>
            <div class="panel-heading">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#nationhistory" ng-click="displayNationLine()">
                    逐鹿中原
                </button>
            </div>
            <div class="modal fade" id="nationhistory" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">逐鹿中原</h4>
                        </div>
                        <div class="modal-body">
                            <canvas id="nation-history-chart-area" width="300" height="300" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>国家</th>
                            <th>胜率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="nation in nations">
                            <td ng-style="set_color(nation)">
                                {{nation.Name}}
                            </td>
                            <td ng-style="set_color(nation)">
                                {{nation.WinRatio}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>



        <div class="col-md-5 col-sm-5 col-xs-5">

            <div class="panel panel-default"></div>
            <div class="panel-heading">

                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#hall" ng-click="displayHall()">
                    名人堂
                </button>
            </div>
            <div class="modal fade" id="hall" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">名人堂</h4>
                        </div>
                        <div class="modal-body">
                            <canvas id="hall-chart-area-history" width="300" height="300" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel-body">
                <table class="table table-condensed" style="border-collapse:collapse;">
                    <thead>
                        <tr>
                            <th>赛季</th>
                            <th>姓名</th>
                            <th>总场次</th>
                            <th>总击杀</th>
                            <th>胜率</th>
                            <th>积分</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>I</td>
                            <td>David</td>
                            <td>37</td>
                            <td>13</td>
                            <td>45.95%</td>
                            <td>75</td>
                        </tr>
                        <tr>
                            <td>II</td>
                            <td>Kent</td>
                            <td>43</td>
                            <td>17</td>
                            <td>48.84%</td>
                            <td>92</td>
                        </tr>
                        <tr>
                            <td>III</td>
                            <td>Alex</td>
                            <td>50</td>
                            <td>34</td>
                            <td>50.00%</td>
                            <td>111</td>
                        </tr>
                        <tr>
                            <td>IV</td>
                            <td>Kent</td>
                            <td>44</td>
                            <td>37</td>
                            <td>45.45%</td>
                            <td>97</td>
                        </tr>
                        <tr>
                            <td>V</td>
                            <td>Alex</td>
                            <td>50</td>
                            <td>33</td>
                            <td>40.00%</td>
                            <td>101</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-md-8 col-sm-8 col-xs-8">
            <script>

                var mod = angular.module('myScore', []);

                mod.filter('percentage', ['$filter', function ($filter) {
                    return function (input, decimals) {
                        return $filter('number')(input * 100, decimals) + '%';
                    };
                }]);

                mod.controller('scoreCtrl', function ($scope) {

                    $.getJSON('api/scores/lasttensessions').success(function (data) {
                        $scope.$apply(function () {
                            $scope.scores = data;
                            $scope.set_winner_color = function (score) {
                                if (score.WinnerNation == "0") {
                                    return { background: "#5191FF" };
                                }
                                else if (score.WinnerNation == "1") {
                                    return { background: "#E08B55" };
                                }
                                else if (score.WinnerNation == "2") {
                                    return { background: "#7EAB44" };
                                }
                                else {
                                    return { background: "#766F99" };
                                }
                            };
                        });
                    });

                    $scope.showme = function (id) {
                        var url = "api/sessions/" + id;
                        $.getJSON(url).success(function (score) {
                            $scope.$apply(function () {
                                $scope.items = score;
                            });
                        });
                    };

                    $.getJSON('api/players').success(function (data) {
                        $scope.$apply(function () {
                            $scope.players = data;
                        });
                    });


                    $scope.heroshowtime = function (page) {
                        $.getJSON('api/top10/' + page.toString()).success(function (data) {
                            $scope.$apply(function () {
                                $scope.heros = data;
                                $scope.set_hero_color = function (hero) {
                                    if (hero.Nation == "0") {
                                        return { background: "#5191FF" };
                                    }
                                    else if (hero.Nation == "1") {
                                        return { background: "#E08B55" };
                                    }
                                    else if (hero.Nation == "2") {
                                        return { background: "#7EAB44" };
                                    }
                                    else {
                                        return { background: "#766F99" };
                                    }
                                };
                            });
                        });
                    }


                    $.getJSON('api/winratio').success(function (data) {
                        $scope.$apply(function () {
                            $scope.wins = data;

                            $scope.set_pre_score = function (curgames, curscores) {

                                var min = 50 - curgames + curscores;
                                var max = (50 - curgames) * 3 + curscores;

                                return min.toString() + ' ~ ' + max.toString();
                            }

                            $scope.set_playerratio_color = function (win) {
                                if (win.WinnerNation == "0") {
                                    return { background: "#5191FF" };
                                }
                                else if (win.WinnerNation == "1") {
                                    return { background: "#E08B55" };
                                }
                                else if (win.WinnerNation == "2") {
                                    return { background: "#7EAB44" };
                                }
                                else {
                                    return { background: "#766F99" };
                                }
                            }
                        });
                    });

                    $scope.set_backcolor = function (represent) {
                        if (represent == "0") {
                            return { background: "#5191FF" };
                        }
                        else if (represent == "1") {
                            return { background: "#E08B55" };
                        }
                        else if (represent == "2") {
                            return { background: "#7EAB44" };
                        }
                        else {
                            return { background: "#766F99" };
                        }
                    }
                    $.getJSON('api/history').success(function (data) {
                        $scope.$apply(function () {
                            $scope.historys = data;


                        });
                    });


                    $.getJSON('api/top5/0').success(function (data) {
                        $scope.$apply(function () {
                            $scope.weis = data;
                        });
                    });

                    $.getJSON('api/top5/1').success(function (data) {
                        $scope.$apply(function () {
                            $scope.shus = data;
                        });
                    });

                    $.getJSON('api/top5/2').success(function (data) {
                        $scope.$apply(function () {
                            $scope.wus = data;
                        });
                    });

                    $.getJSON('api/top20/0').success(function (data) {
                        $scope.$apply(function () {
                            $scope.combinations = data;
                        });


                    });


                    $.getJSON('api/top5/3').success(function (data) {
                        $scope.$apply(function () {
                            $scope.quns = data;
                        });
                    });


                    $.getJSON('api/top10/0').success(function (data) {
                        $scope.$apply(function () {
                            $scope.heros = data;
                            $scope.set_hero_color = function (hero) {
                                if (hero.Nation == "0") {
                                    return { background: "#5191FF" };
                                }
                                else if (hero.Nation == "1") {
                                    return { background: "#E08B55" };
                                }
                                else if (hero.Nation == "2") {
                                    return { background: "#7EAB44" };
                                }
                                else {
                                    return { background: "#766F99" };
                                }
                            };
                        });
                    });

                    $scope.displayRadarHis = function (name) {
                        $.getJSON('api/winners/' + name + '/0').success(function (data) {
                            var radarData = data;
                            var rgba = GetNationColor(data);
                            var config = {
                                type: 'radar',
                                data: {
                                    labels: ["魏", "蜀", "吴", "群"],

                                    datasets: [{
                                        label: "Winner Games",
                                        data: radarData,
                                        backgroundColor: rgba,
                                        pointBackgroundColor: "rgba(220,220,220,1)",
                                    }],
                                },
                                options: {
                                    legend: {
                                        position: 'top',
                                    },
                                    title: {
                                        display: true,

                                    },
                                    scale: {
                                        reverse: false,
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            };
                            var id = "his-win-chart-area" + name;
                            var ctx = document.getElementById(id).getContext("2d");

                            window.myRadar = new Chart(document.getElementById(id), config);
                        });
                    }

                    $scope.displayRadar = function (name) {
                        $.getJSON('api/winners/' + name + '/' + currentseason).success(function (data) {
                            var radarData = data;
                            var rgba = GetNationColor(data);
                            var config = {
                                type: 'radar',
                                data: {
                                    labels: ["魏", "蜀", "吴", "群"],

                                    datasets: [{
                                        label: "Winner Games",
                                        data: radarData,
                                        backgroundColor: rgba,
                                        pointBackgroundColor: "rgba(220,220,220,1)",
                                    }],
                                },
                                options: {
                                    legend: {
                                        position: 'top',
                                    },
                                    title: {
                                        display: true,

                                    },
                                    scale: {
                                        reverse: false,
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            };
                            var id = "win-chart-area" + name;
                            var ctx = document.getElementById(id).getContext("2d");

                            window.myRadar = new Chart(document.getElementById(id), config);
                        });
                    };

                    var GetNationColor = function (data) {
                        var maxValue = Math.max.apply(Math, data);
                        var maxIndex = data.indexOf(Math.max.apply(Math, data));
                        var defaultColor = "#766F99";
                        switch (maxIndex) {
                            case 0:
                                defaultColor = "#5191FF";
                                break;
                            case 1:
                                defaultColor = "#E08B55";
                                break;
                            case 2:
                                defaultColor = "#7EAB44";
                                break;
                            default:
                                defaultColor = "#766F99";
                                break;
                        }

                        var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
                        var matches = patt.exec(defaultColor);
                        var rgba = "rgba(" + parseInt(matches[1], 16) + "," + parseInt(matches[2], 16) + "," + parseInt(matches[3], 16) + ",0.5" + ")";

                        return rgba;
                    };

                    var getRGBA = function (defaultColor) {
                        var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
                        var matches = patt.exec(defaultColor);
                        var rgba = "rgba(" + parseInt(matches[1], 16) + "," + parseInt(matches[2], 16) + "," + parseInt(matches[3], 16) + ",0.5" + ")";

                        return rgba;
                    };

                    var randomColorFactor = function () {
                        return Math.round(Math.random() * 255);
                    };

                    var randomColor = function (opacity) {
                        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
                    };

                    $scope.displayAll = function (name) {
                        $.getJSON('api/allgames/' + name + '/' + currentseason).success(function (data) {
                            var pieDate = data;
                            var rgba = GetNationColor(data);
                            var config = {
                                type: 'radar',
                                data: {
                                    labels: ["魏", "蜀", "吴", "群"],
                                    datasets: [{
                                        label: "All Games",
                                        data: pieDate,
                                        backgroundColor: rgba,
                                        pointBackgroundColor: "rgba(220,220,220,1)",
                                    }],
                                },
                                options: {
                                    legend: {
                                        position: 'top',
                                    },
                                    title: {
                                        display: true,

                                    },
                                    scale: {
                                        reverse: false,
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            };
                            var id = "all-chart-area" + name;
                            var ctx = document.getElementById(id).getContext("2d");
                            window.myRadar = new Chart(document.getElementById(id), config);
                        });
                    }
                    $scope.displayAllHis = function (name) {
                        $.getJSON('api/allgames/' + name + '/0').success(function (data) {
                            var pieDate = data;
                            var rgba = GetNationColor(data);
                            var config = {
                                type: 'radar',
                                data: {
                                    labels: ["魏", "蜀", "吴", "群"],
                                    datasets: [{
                                        label: "All Games",
                                        data: pieDate,
                                        backgroundColor: rgba,
                                        pointBackgroundColor: "rgba(220,220,220,1)",
                                    }],
                                },
                                options: {
                                    legend: {
                                        position: 'top',
                                    },
                                    title: {
                                        display: true,

                                    },
                                    scale: {
                                        reverse: false,
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            };
                            var id = "his-all-chart-area" + name;
                            var ctx = document.getElementById(id).getContext("2d");
                            window.myRadar = new Chart(document.getElementById(id), config);
                        });
                    }

                    var randomScalingFactor = function () {
                        return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
                    };

                    var nationdata = function (index, mydata) {
                        return mydate[index];
                    };

                    $scope.displaybar = function (para) {
                        $.getJSON('api/nationwin/' + para).success(function (mydata) {

                            var ctx = document.getElementById("nation-chart-area-history").getContext("2d");

                            var barChartData1 = {
                                labels: mydata.labels,
                                datasets: mydata.datasets,
                            };

                            var config = {
                                type: 'bar',
                                data: barChartData1,
                                options: {
                                    elements: {
                                        rectangle: {
                                            borderWidth: 0,
                                            borderColor: 'rgb(0, 255, 0)',
                                            borderSkipped: 'bottom'
                                        }
                                    },
                                    responsive: true,
                                    legend: {
                                        position: 'top',
                                    },
                                    title: {
                                        display: true,
                                        text: '国家战绩'
                                    }
                                }
                            };

                            window.myBar = new Chart(ctx, config);
                            window.myBar.update();
                        });
                    };

                    $scope.displayHall = function () {
                        var background1 = randomColor(0.5);
                        var background2 = randomColor(0.5);
                        var background3 = randomColor(0.5);
                        var background4 = randomColor(0.5);
                        var background5 = randomColor(0.5);
                        var config = {
                            type: 'line',
                            data: {
                                labels: ["S1", "S2", "S3", "S4", "S5"],

                                datasets: [{
                                    label: "Alex",
                                    data: [2, 3, 1, 3, 1],
                                    fill: false,
                                    borderColor: background1,
                                    backgroundColor: background1,
                                    pointBorderColor: background1,
                                    pointBackgroundColor: background1,
                                    pointBorderWidth: 1
                                }, {
                                    label: "David",
                                    data: [1, 4, 4, 2, 3],
                                    fill: false,
                                    borderColor: background2,
                                    backgroundColor: background2,
                                    pointBorderColor: background2,
                                    pointBackgroundColor: background2,
                                    pointBorderWidth: 1
                                }
                                , {
                                    label: "Elvin",
                                    data: [4, 2, 3, 4, 4],
                                    fill: false,
                                    borderColor: background3,
                                    backgroundColor: background3,
                                    pointBorderColor: background3,
                                    pointBackgroundColor: background3,
                                    pointBorderWidth: 1
                                }
                                , {
                                    label: "Kent",
                                    data: [3, 1, 2, 1, 2],
                                    fill: false,
                                    borderColor: background4,
                                    backgroundColor: background4,
                                    pointBorderColor: background4,
                                    pointBackgroundColor: background4,
                                    pointBorderWidth: 1
                                }
                                , {
                                    label: "Shine",
                                    data: [5, 5, 5, 5, 5],
                                    fill: false,
                                    borderColor: background5,
                                    backgroundColor: background5,
                                    pointBorderColor: background5,
                                    pointBackgroundColor: background5,
                                    pointBorderWidth: 1
                                }]
                            },
                            options: {
                                legend: {
                                    position: 'top',
                                },
                                title: {
                                    display: true,
                                    text: 'All Season'
                                },
                                scales: {


                                    xAxes: [{
                                        display: true,
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Season'
                                        }
                                    }],
                                    yAxes: [{
                                        display: true,
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Rank'
                                        },
                                        ticks: {
                                            suggestedMin: 1,
                                            suggestedMax: 8,
                                            reverse: true
                                        }
                                    }]

                                },
                                title: {
                                    display: true,
                                    text: 'All Season'
                                }
                            }

                        };


                        var ctx = document.getElementById("hall-chart-area-history").getContext("2d");
                        window.myLine = new Chart(ctx, config);
                        window.myLine.update();
                    };

                    $scope.displayNationLine = function () {
                        $.getJSON('api/nationratio/history').success(function (ratios) {
                            var lineData = ratios;
                            var newDatasets = [];
                            var background = randomColor(0.5);
                            $.each(ratios, function (i) {
                                switch (i) {
                                    case 0:
                                        background = getRGBA("#5191FF")
                                        break;
                                    case 1:
                                        background = getRGBA("#E08B55")
                                        break;
                                    case 2:
                                        background = getRGBA("#7EAB44")
                                        break;
                                    default:
                                        background = getRGBA("#766F99")
                                        break;
                                }


                                var newds = {
                                    label: ratios[i].NationName,
                                    fill: false,
                                    borderColor: background,
                                    backgroundColor: background,
                                    pointBorderColor: background,
                                    pointBackgroundColor: background,
                                    pointBorderWidth: 1,
                                    data: [],
                                }
                                newds.data = ratios[i].WinRatio;

                                newDatasets.push(newds);
                            });

                            var config = {
                                type: 'line',
                                data: {
                                    labels: ratios[0].TheDay,
                                    datasets: newDatasets
                                },
                                options: {
                                    responsive: true,
                                    legend: {
                                        position: 'bottom',
                                    },
                                    hover: {
                                        mode: 'label'
                                    },
                                    scales: {
                                        xAxes: [{
                                            display: true,
                                            scaleLabel: {
                                                display: false,
                                                labelString: 'Nations'
                                            }
                                        }],
                                        yAxes: [{
                                            display: true,
                                            scaleLabel: {
                                                display: true,
                                                labelString: 'Ratio'
                                            }
                                        }]
                                    },
                                    title: {
                                        display: true,
                                        text: 'All Nations'
                                    }
                                }
                            };

                            var ctx = document.getElementById("nation-history-chart-area").getContext("2d");
                            window.myLine = new Chart(ctx, config);
                            window.myLine.update();
                        });
                    };

                    $scope.displayLine = function (season) {
                        if (season != 0) {
                            season = currentseason;
                        }
                        $.getJSON('api/season/detail/' + season).success(function (ratios) {
                            var lineDate = ratios;
                            var newDatasets = [];

                            $.each(ratios, function (i) {
                                var background = randomColor(0.5);
                                var newds = {
                                    label: ratios[i].PlayerName,
                                    fill: false,
                                    borderColor: background,
                                    backgroundColor: background,
                                    pointBorderColor: background,
                                    pointBackgroundColor: background,
                                    pointBorderWidth: 1,
                                    data: [],
                                }
                                newds.data = ratios[i].DaliyRatio;

                                newDatasets.push(newds);
                            });

                            var config = {
                                type: 'line',
                                data: {
                                    labels: ratios[0].Days,
                                    datasets: newDatasets
                                },
                                options: {
                                    responsive: true,
                                    legend: {
                                        position: 'bottom',
                                    },
                                    hover: {
                                        mode: 'label'
                                    },
                                    scales: {
                                        xAxes: [{
                                            display: true,
                                            scaleLabel: {
                                                display: false,
                                                labelString: 'Season'
                                            }
                                        }],
                                        yAxes: [{
                                            display: true,
                                            scaleLabel: {
                                                display: true,
                                                labelString: 'Ratio'
                                            }
                                        }]
                                    },
                                    title: {
                                        display: true,
                                        text: 'Season ' + season
                                    }
                                }
                            };

                            if (season == 0) {
                                var ctxhistory = document.getElementById("season-chart-area-history").getContext("2d");
                                window.myLine = new Chart(ctxhistory, config);
                                window.myLine.update();
                            }
                            else {
                                var ctx = document.getElementById("season-chart-area").getContext("2d");
                                window.myLine = new Chart(ctx, config);
                                window.myLine.update();
                            }
                        });


                    };

                    $scope.displayPie = function (name) {

                        $.getJSON('api/showfirst/' + name).success(function (data) {
                            var radar0 = data[0];
                            var radar1 = data[1];
                            var rgba0 = GetNationColor(radar0);
                            var rgba1 = GetNationColor(radar1);
                            var config = {
                                type: 'radar',
                                data: {
                                    labels: ["魏", "蜀", "吴", "群"],
                                    datasets: [{
                                        label: "Show First in History",
                                        data: radar0,
                                        backgroundColor: rgba0,
                                        pointBackgroundColor: "rgba(220,220,220,1)",
                                    },
                                    {
                                        label: "Show First in Current Season",
                                        data: radar1,
                                        backgroundColor: rgba1,
                                        pointBackgroundColor: "rgba(220,220,220,1)",
                                    }],
                                },
                                options: {
                                    legend: {
                                        position: 'top',
                                    },
                                    title: {
                                        display: true,

                                    },
                                    scale: {
                                        reverse: false,
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            };
                            var id = "chart-area" + name;
                            var ctx = document.getElementById(id).getContext("2d");
                            window.myRadar = new Chart(document.getElementById(id), config);
                        });
                    }


                    $scope.chiefshowtime = function (page) {

                        $.getJSON('api/top10/chief/' + page).success(function (data) {
                            $scope.$apply(function () {
                                $scope.herochiefs = data;
                                $scope.set_chief_color = function (hero) {
                                    if (hero.Nation == "0") {
                                        return { background: "#5191FF" };
                                    }
                                    else if (hero.Nation == "1") {
                                        return { background: "#E08B55" };
                                    }
                                    else if (hero.Nation == "2") {
                                        return { background: "#7EAB44" };
                                    }
                                    else {
                                        return { background: "#766F99" };
                                    }
                                };
                            });

                        });
                    };


                    $.getJSON('api/top10/chief/0').success(function (data) {
                        $scope.$apply(function () {
                            $scope.herochiefs = data;
                            $scope.set_chief_color = function (hero) {
                                if (hero.Nation == "0") {
                                    return { background: "#5191FF" };
                                }
                                else if (hero.Nation == "1") {
                                    return { background: "#E08B55" };
                                }
                                else if (hero.Nation == "2") {
                                    return { background: "#7EAB44" };
                                }
                                else {
                                    return { background: "#766F99" };
                                }
                            };
                        });

                    });

                    $scope.showcombinations = function (page) {
                        $.getJSON('api/top20/' + page).success(function (data) {
                            $scope.$apply(function () {
                                $scope.combinations = data;


                            });


                        });
                    };

                    $scope.set_combination_color = function (hero) {
                        if (hero.Nation == "0") {
                            return { background: "#5191FF" };
                        }
                        else if (hero.Nation == "1") {
                            return { background: "#E08B55" };
                        }
                        else if (hero.Nation == "2") {
                            return { background: "#7EAB44" };
                        }
                        else {
                            return { background: "#766F99" };
                        }
                    };

                    $scope.viceshowtime = function (page) {
                        $.getJSON('api/top10/vice/' + page).success(function (data) {
                            $scope.$apply(function () {
                                $scope.herovices = data;
                                $scope.set_vice_color = function (hero) {
                                    if (hero.Nation == "0") {
                                        return { background: "#5191FF" };
                                    }
                                    else if (hero.Nation == "1") {
                                        return { background: "#E08B55" };
                                    }
                                    else if (hero.Nation == "2") {
                                        return { background: "#7EAB44" };
                                    }
                                    else {
                                        return { background: "#766F99" };
                                    }
                                };
                            });
                        });
                    }

                    $.getJSON('api/top10/vice/0').success(function (data) {
                        $scope.$apply(function () {
                            $scope.herovices = data;
                            $scope.set_vice_color = function (hero) {
                                if (hero.Nation == "0") {
                                    return { background: "#5191FF" };
                                }
                                else if (hero.Nation == "1") {
                                    return { background: "#E08B55" };
                                }
                                else if (hero.Nation == "2") {
                                    return { background: "#7EAB44" };
                                }
                                else {
                                    return { background: "#766F99" };
                                }
                            };
                        });
                    });




                    $.getJSON('api/nationratio').success(function (data) {
                        $scope.$apply(function () {
                            $scope.nations = data;
                            $scope.set_color = function (nation) {
                                if (nation.Name == "魏") {
                                    return { color: "#5191FF" };
                                }
                                else if (nation.Name == "蜀") {
                                    return { color: "#E08B55" };
                                }
                                else if (nation.Name == "吴") {
                                    return { color: "#7EAB44" };
                                }
                                else {
                                    return { color: "#766F99" };
                                }
                            };
                        });

                    });


                    $.getJSON('api/showfirst').success(function (data) {
                        $scope.$apply(function () {
                            $scope.shows = data;

                            $scope.set_showfirst_color = function (show) {
                                if (show.MaxShowFirstNation == "0") {
                                    return { color: "#5191FF" };
                                }
                                else if (show.MaxShowFirstNation == "1") {
                                    return { color: "#E08B55" };
                                }
                                else if (show.MaxShowFirstNation == "2") {
                                    return { color: "#7EAB44" };
                                }
                                else {
                                    return { color: "#766F99" };
                                }
                            };
                        });
                    });

                    $scope.iswinner = function (item) {
                        if (item.IsWinner) {
                            //item.mark = 3;
                            if (item.IsCareerist) {
                                item.mark = item.Session.PlayerNumber;
                            }
                            else {
                                item.mark = 3;
                            }
                        }
                        else {
                            item.mark = 1;
                        }
                        return true;
                    }

                    $scope.getWinner = function (item) {
                        var winners = [];
                        if (item != null) {
                            $.each(item, function (index, value) {
                                if (value.IsWinner) {
                                    winners[winners.length + 1] = value.Player.Name;
                                }
                            });
                        }
                        var result = winners.join();
                        return result.replace(',', '  ').replace(',,', '  ').replace(',,', '  ').replace(',,', '  ');

                    }

                });

            </script>

            <div class="panel panel-default">
                <h4><b>Last 10 games detail</b></h4>

                <div class="panel-group" role="tablist" id="accordion">
                    <div class="panel panel-default" aria-multiselectable="false" ng-repeat="score in scores">
                        <div class="panel-heading" role="tab" ng-style="set_winner_color(score)">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{score.ID}}" aria-expanded="true" ng-click="showme(score.ID)">
                                    {{score.GameDate | date:'yyyy-MM-dd'}} &nbsp;  {{score.PlayerNumber}} Players &nbsp; Winner: {{ getWinner(score.ScoreDetails)}}
                                </a>
                            </h4>
                        </div>
                        <div id="{{score.ID}}" class="panel-collapse collapse">
                            <div class="panel-body">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <td>Player</td>
                                            <td>Chief Fighter</td>
                                            <td>Vice Fighter</td>
                                            <td>Winner</td>
                                            <td>Show First</td>
                                            <td>Careerist</td>
                                            <td>Kills</td>
                                            <td>Score</td>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="item in items">
                                            <td>{{item.Player.Name}}</td>
                                            <td>{{item.Chief.Name}}</td>
                                            <td>{{item.Vice.Name}}</td>
                                            <td ng-show="{{item.IsWinner}}"><s><span style="color:red" class="glyphicon glyphicon-flag" aria-hidden="true"></span></td>
                                            <td ng-show="!{{item.IsWinner}}"></></td>
                                            <td ng-show="{{item.IsShowFirst}}"><span style="color:greenyellow" class="glyphicon glyphicon-flag" aria-hidden="true"></span></td>
                                            <td ng-show="!{{item.IsShowFirst}}"></td>
                                            <td ng-show="{{item.IsCareerist}}"><span style="color:purple" class="glyphicon glyphicon-flag" aria-hidden="true"></span></td>
                                            <td ng-show="!{{item.IsCareerist}}"></td>
                                            <td>{{item.Kills}}</td>
                                            <td ng-show="iswinner(item)">{{item.mark}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>
</div>
